<!DOCTYPE html>
<html>
<head>
    <title>附件信息</title>
    <meta name="layout" content="main"/>
    <asset:stylesheet src="homer/vendor/viewer/viewer.min.css"/>

    <style type="text/css">
        
        .attchmentBody{
            padding: 0 !important;
            height: 160px;
        }
        .attchmentBody .imgBox {
            display: block;
            height: 130px;
            position: relative;
            box-sizing: border-box;
            padding: 5px 0;
        }

        .attchmentBody .imgBox img,.attchmentBody .imgBox .file-title {
            max-width: 100%;
            max-height: 100%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .attchmentBody .imgBox .file-title{
            width: 100%;
            padding: 0 15px;
            text-align: center;

        }

        .attchmentBody .imgBox .file-title:hover {
            text-decoration: underline;
        }
        .attchmentBody .description-edit {
            box-sizing: border-box;
            padding: 0 15px 10px 15px;
            display: block;
            width: 100%;
            height: 30px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

    </style>
</head>

<body class="fixed-navbar fixed-sidebar">

<div class="small-header">
    <div class="hpanel">
        <div class="panel-body">
            <div id="hbreadcrumb" class="pull-right">
                <ol class="hbreadcrumb breadcrumb">
                    <li>CINDATA PLS</li>
                    <li>
                        <g:link controller="estate" action="estateShow" id="${this?.collateral?.id}"><span>房地产</span></g:link>
                    </li>
                    <li class="active">
                        <span>附件详情</span>
                    </li>
                </ol>
            </div>
            <h2 class="font-light m-b-xs">
                附件管理
            </h2>
        </div>
    </div>
</div>

<div class="content animate-panel docs-pictures">

    <div class="row">
        <div class="hpanel">
            <div class="panel-heading">
                <div class="panel-tools">
                    <!-- <g:if test="${this.photoes?.size() >= 2}">
                        <g:link class="btn btn-info btn-xs" controller="Attachment" action="prepareSetDisplayOrder" params="[collateral: this.collateral?.id, attachmentType: com.cindata.dictionary.AttachmentType.findByName(this.attachmentTypeName)?.id]"><i class="fa fa-refresh"></i>排序</g:link>
                        <a class="showhide"><i class="fa fa-chevron-up"></i></a>
                    </g:if> -->
                </div>
                ${attachmentTypeName}(${this.photoes?.size()})
            </div>

            <div class="panel-body p-xs">
                <g:each in="${this.photoes}">
                    <div class="col-lg-3">
                        <div class="hpanel">
                            <div class="panel-heading">
                                <div class="panel-tools">
                                    <g:form resource="${it}" method="DELETE">
                                        <input type="hidden" name="attachmentTypeName" value="${this.attachmentTypeName}">
                                        <input type="hidden" name="targetUri" value="${this?.targetUri}">
                                        <button class="deleteBtn btn btn-danger btn-xs" type="button"><i class="fa fa-trash-o"></i>删除</button>
                                    </g:form>
                                </div>
                                ${attachmentTypeName}
                            </div>

                            <div class="panel-body attchmentBody">
                                <div class="imgBox">
                                    <g:if test="${it?.fileUrl?.split('\\.')[-1] in ['doc', 'docx', 'pdf', 'xlsx', 'xls']}">
                                        <a class="file-title" href="${it?.fileUrl}">${it?.fileUrl?.split('/')[-1]}
                                            <h5 class="text-info">点击查看</h5>
                                        </a>
                                    </g:if>
                                    <g:if test="${it?.fileUrl?.split('\\.')[-1] in ['jpg', 'png', 'jpeg','JPG','PNG','JPEG']}">
                                        <g:if test="${it?.thumbnailUrl}">
                                            <img src="${it?.thumbnailUrl}" data-original="${it?.fileUrl}" alt="${it?.type?.name}" data/>
                                        </g:if>
                                        <g:else>
                                            <img src="${it?.fileUrl}" data-original="${it?.fileUrl}" alt="${it?.type?.name}">
                                        </g:else>
                                    </g:if>
                                </div>

                                <div class="tooltip-demo">
                                    <g:link class="btn-link description-edit" controller="attachment" action="edit" params="[id: it?.id, attachmentTypeName: attachmentTypeName]" data-toggle="tooltip" data-placement="left" title="${it?.description}">编辑描述：
                                        <g:if test="${it?.description}">${it?.description}</g:if>
                                    </g:link>
                                </div>
                            </div>

                            <div class="panel-footer ">
                                <g:formatDate date="${it.createdDate}" format="yyyy-MM-dd HH:mm:ss"></g:formatDate>
                            </div>
                        </div>
                    </div>
                </g:each>
                <g:if test="${this.photoes?.size() == 0}">
                    暂无${attachmentTypeName}照片
                </g:if>
            </div>
        </div>
    </div>

</div>

<asset:javascript src="homer/vendor/viewer/viewer.min.js"/>
<asset:javascript src="homer/vendor/viewer/main.js"/>
</body>
</html>
